<script lang="ts" setup>
import { useSearchStore } from '@/stores/searchTermData.ts';
import TablePolicy from '@/views/agriculture/PlatePage/policiesRegulations/_/TablePolicy.vue';
import { HomeOutlined } from '@ant-design/icons-vue';
import { useRouter } from 'vue-router';

// 面包屑
const breadcrumb = [
  { label: '首页', path: '/' },
  { label: '政策法规', path: '' },
];

// Pinia
const SearchStore = useSearchStore();

const searchTerm = ref<string>('');

// 当点击搜索按钮时，设置搜索内容
function onSearch() {
  SearchStore.policySearch.searchTerm = searchTerm.value;
}

// 获取 Vue Router 实例
const router = useRouter();
// 返回上一页
const goBack = () => {
  router.back();
};

onBeforeRouteLeave(() => {
  SearchStore.resetSearch(); // 重置搜索
});
</script>

<template>
  <div class="mb-12 mt-5 flex flex-col">
    <!-- 表头工具栏 -->
    <div class="flex h-14 items-center justify-between gap-2 bg-white px-6">
      <div class="flex grow-[1] items-center gap-2">
        <HomeOutlined />
        <span class="">当前位置:</span>
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item v-for="(item, index) in breadcrumb" :key="index" :to="item.path">
            {{ item.label }}
          </el-breadcrumb-item>
        </el-breadcrumb>
      </div>

      <div class="flex items-center gap-2">
        <a-input-search
          v-model:value="searchTerm"
          style="width: 300px"
          placeholder="输入关键词(政策标题/类型)搜索"
          enter-button="搜索"
          size="middle"
          @search="onSearch"
          @clear="SearchStore.resetSearch()"
          allow-clear
        />
        <span class="ml-4 cursor-pointer" @click="goBack"> 【返回上一页】 </span>
      </div>
    </div>

    <!-- 表格 -->
    <div class="table-shadow mt-4 min-h-[700px] bg-white p-4">
      <div class="bg-white">
        <div class="bg-white" style="border-bottom: 2px solid rgb(41, 156, 12)">
          <div class="inline-block p-2" style="background-color: rgb(41, 156, 12)">
            <span class="mx-4 text-xl font-bold text-white">政策法规</span>
          </div>
        </div>
        <div>
          <TablePolicy />
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.table-shadow {
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
}
</style>
